<template>
  <div>
    <Card
      :class="
        store.state.settings.isLanguageType === 'zh' ? 'table_zh' : 'table_en'
      "
    >
      <Table
        :row-selection="rowSelection"
        :columns="
          columns.filter((col) => {
            return !col.hide;
          })
        "
        :data-source="data"
        class="ant-table-striped"
        :row-class-name="
          (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        :scroll="{ x: 2000, y: tableHeight }"
        :size="size"
        :loading="loading"
        @resizeColumn="handleResizeColumn"
        @change="handleTableChange"
        :pagination="pagination"
        ref="tableMain"
        id="fullDom"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'flowName'">
            <span> {{ $t("tableIndex.FlowName") }} </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'flowName'">
            <div
              @mouseenter="handleMouseenter((isHovered = true), column, record)"
              @mouseleave="handleMouseleave((isHovered = true), column, record)"
            >
              <div>
                <Row>
                  <Col
                    :span="24"
                    style="
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    <Tooltip :title="record.flowName">
                      <a class="color-[#1677ff]" @click="showDrawer(record)">
                        {{ record.flowName }}
                      </a>
                    </Tooltip>
                  </Col>
                </Row>
              </div>
            </div>
          </template>
          <template v-if="column.key === 'deployMode'">
            <span>{{
              record.deployMode == 1
                ? $t("table.Onlineeval")
                : $t("table.Offlineeval")
            }}</span>
          </template>
          <template v-if="column.key === 'flowStatus'">
            <div
              class="BadgeWapper"
                style="
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
              "
            >
              <a-popover
                placement="top"
                :content="getPhaseTree(record)"
                trigger="hover"
              >
                <a-tag :color="getStatusColor(record.flowStatus)">
                  {{ statusFn(record.flowStatus) }}
                </a-tag>
              </a-popover>
              <!-- 评估完成后显示"创建迁移任务" -->
              <template v-if="isEvalFinished(record.flowStatus)">
                <a-button
                  class="ml-2"
                  type="primary"
                  size="small"
                  style="cursor: pointer; margin-top: 10px"
                  @click="goToCreateMigration(record)"
                >
                  {{ $t("tableIndex.CreateMigrationTask") }}
                </a-button>
          </template>
            </div>
          </template>

          <template v-if="column.key === 'dbType'">
            <a-popover>
              <template #content>
                <a-card style="width: 300px">
                  <Row :gutter="[20, 40]">
                    <Col
                      style="text-align: right; color: #000; font-size: 16px"
                      :span="10"
                    >
                      {{ $t("tableIndex.Sourcetype") }}
                    </Col>
                    <Col :span="14" style="color: #aaa">
                      <img
                        class="source_info_img"
                        :class="{ null_img: !record.dbType }"
                        :src="
                          loadImg(
                            `smallIcon/${
                              record.dbType ? record.dbType : 'null'
                            }.png`
                          )
                        "
                        alt=""
                      />
                    </Col>
                  </Row>
                  <Row
                    :gutter="[20, 40]"
                    v-for="(item, index) in srcShow"
                    :key="index"
                  >
                    <Col
                      style="text-align: right; color: #000; font-size: 16px"
                      :span="10"
                    >
                      {{ item.title }}
                    </Col>
                    <Col :span="14" style="color: #999">
                      {{ record[item.key] }}
                    </Col>
                  </Row>
                </a-card>
              </template>
              <img
                class="source_info_img"
                :class="{ null_img: !record.dbType }"
                :src="
                  loadImg(
                    `smallIcon/${record.dbType ? record.dbType : 'null'}.png`
                  )
                "
                alt=""
              />
            </a-popover>
          </template>
          <template v-if="column.key === 'reserve2'">
            <a-popover v-if="getDtType(record.reserve2).split(',').length > 1">
              <template #content>
                <a-table
                  size="small"
                  :pagination="false"
                  :dataSource="tSrcPopTa(getDtType(record.reserve2).split(','))"
                  :columns="tSrcPop"
                >
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'type'">
                      <img
                        class="source_info_img"
                        :class="{ null_img: !record.type }"
                        :src="
                          loadImg(
                            `smallIcon/${
                              record.type ? record.type : 'null'
                            }.png`
                          )
                        "
                        alt=""
                      />
                    </template>
                  </template>
                </a-table>
              </template>
              <Badge
                :number-style="{ backgroundColor: '#b7eb8f' }"
                :count="getDtType(record.reserve2).split(',').length"
              >
                <img
                  class="source_info_img"
                  :class="{ null_img: !record.reserve2 }"
                  :src="
                    loadImg(
                      `smallIcon/${
                        getDtType(record.reserve2).split(',').shift()
                          ? getDtType(record.reserve2).split(',').shift()
                          : 'null'
                      }.png`
                    )
                  "
                  alt=""
                />
              </Badge>
            </a-popover>
            <a-popover v-else>
              <template #content>
                <a-card style="width: 300px">
                  <Row :gutter="[20, 40]">
                    <Col
                      style="text-align: right; color: #000; font-size: 16px"
                      :span="10"
                    >
                      {{ $t("tableIndex.Targettype") }}
                    </Col>
                    <Col :span="14" style="color: #aaa">
                      <img
                        class="source_info_img"
                        :class="{ null_img: !record.reserve2 }"
                        :src="
                          loadImg(
                            `smallIcon/${
                              record.reserve2 ? record.reserve2 : 'null'
                            }.png`
                          )
                        "
                        alt=""
                      />
                    </Col>
                  </Row>
                  <Row
                    :gutter="[20, 40]"
                    class="line-30"
                    v-for="(item, index) in tarShow"
                    :key="index"
                  >
                    <Col
                      style="text-align: right; color: #000; font-size: 16px"
                      :span="10"
                    >
                      {{ item.title }}
                    </Col>
                    <Col :span="14" style="color: #999">
                      {{ record[item.key] }}
                    </Col>
                  </Row>
                </a-card>
              </template>
              <img
                v-for="e in getDtType(record.reserve2).split(',')"
                class="source_info_img"
                :class="{ null_img: !e }"
                :src="loadImg(`smallIcon/${e ? e : 'null'}.png`)"
                alt=""
              />
            </a-popover>
          </template>
          <template v-else-if="column.key === 'operateList'">
            <div class="flex items-center gap-0">
              <template v-if="record.operateList && record.operateList.length">
                <template
                  v-for="(item, idx) in record.operateList.slice(0, 2)"
                  :key="idx"
              >
              <a-button
                    :disabled="item.disabled"
                type="link"
                class="color-[#1677ff] px-1"
                    @click="handleRootBtn(item.name, record)"
                  >
                    {{ item.name }}
                  </a-button>
                  <a-divider
                    v-if="record.operateList.slice(0, 2).length > 1"
                    type="vertical"
                    class="mx-0"
                  />
                </template>
                <a-dropdown
                  v-if="record.operateList.length > 2"
                  :trigger="['click']"
                >
                <a class="ant-dropdown-link">
                    <a-button type="link" class="color-[#1677ff] px-1">
                      {{ $t("tableIndex.More") }}
                      <MoreOutlined />
                    </a-button>
                </a>
                <template #overlay>
                    <a-menu>
                    <a-menu-item
                        v-for="item in record.operateList.slice(2)"
                        :key="item.name"
                        :style="item.name === '删除' ? { color: 'red' } : {}"
                        @click="handleRootBtn(item.name, record)"
                      >
                        {{ item.name }}
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
              </template>
            </div>
          </template>
        </template>
      </Table>
    </Card>

    <Modal
      v-model:open="isEdit"
      :destroyOnClose="true"
      @cancel="closeModal"
      width="60%"
      :title="isEditOnline === 'edit' ? $t('tableIndex.editTask') : $t('tableIndex.viewTask')"
      :footer="null"
    >
      <Card>
        <div class="modal-scroll-content">
          <!-- 在线 任务概览 编辑 -->
          <InfoConfirm
            :record="selectRowTask"
            :isEditOnline="isEditOnline"
            @close="handleCancel"
            v-if="selectRowTask?.deployMode === 1"
          />
        </div>
      </Card>
    </Modal>
    <!-- 离线 任务概览 编辑 -->
    <viewTask
      ref="viewTaskRef"
      v-if="selectRowTask?.deployMode === 2"
      @refreshFun="refresh"
    />

    <!-- 添加目标端 -->
    <Modal
      v-model:open="isAddTarget"
      :destroyOnClose="true"
      @cancel="isAddTarget = false"
      width="40%"
      :footer="null"
      :title="$t('tableIndex.addTarget')"
    >
      <Card>
        <addTargetComponent :record="selectRowTask" @refreshFun="refresh" @close="isAddTarget = false" />
      </Card>
    </Modal>
    <!-- 详情，使用 Suspense 包裹，加载时显示 loading -->
    <Suspense>
      <template #default>
        <flow-details ref="flowDetailsRef" />
      </template>
      <template #fallback>
        <MyLoading />
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import store from "@/store";
import { provide, inject } from "vue";
import {
  Table,
  Card,
  Row,
  Col,
  Tooltip,
  Badge,
  message,
  Modal,
} from "ant-design-vue";
import {
  MoreOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
  FileSearchOutlined,
} from "@ant-design/icons-vue";
import {
  ref,
  reactive,
  watch,
  onMounted,
  computed,
  h,
  defineAsyncComponent,
  nextTick,
} from "vue";
import { cloneDeep, debounce } from "lodash-es";
import { useTable } from "@/hooks/useTable.js";
import { useStyle } from "@/hooks/useStyle.js";
import * as http from "@/api/index.js";
import emiter from "@/plugins/bus.js";

import { useRowSelectStore } from "@/store/modules/rowSelectStore";
import { useFullScreenStore } from "@/store/modules/isFullScreen";
import { isPrevsVersion } from "@/store/modules/baseFormPrevsVersion";

import {
  columns,
  xoneBusiness,
  // computedCount,
  getDtType,
  getTotalDelayTime,
  tSrcPop,
  tSrcPopTa,
  srcShow,
  tarShow,
  getUserGid,
} from "./columns";
const flowDetails = defineAsyncComponent({
  loader: () => import("@/views/objectCollection/details/index.vue"),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000,
});
const rowSelectStore = useRowSelectStore();
import MyLoading from "@/components/loading/loading.vue";
import MyError from "@/components/loading/error.vue";
import { useRouter } from "vue-router";
import {
  CheckCircleFilled,
  PauseCircleOutlined,
  ClockCircleFilled,
  CloseCircleFilled,
} from "@ant-design/icons-vue";

const InfoConfirm = defineAsyncComponent({
  loader: () =>
    import(
      "@/views/objectCollection/createTask/steps/InfoConfirm/InfoConfirm.vue"
    ),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000,
});
// const InfoConfirm1 = defineAsyncComponent({
//   loader: () =>
//     import("@/views/objectCollection/components/tableMain/edit/index1.vue"),
//   loadingComponent: MyLoading,
//   errorComponent: MyError,
//   delay: 200,
//   timeout: 10000,
// });
const viewTask = defineAsyncComponent({
  loader: () => import("@/views/objectCollection/createOfflineTask/index.vue"),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000,
});
const addTargetComponent = defineAsyncComponent({
  loader: () =>
    import("@/views/objectCollection/components/tableMain/addTarget/index.vue"),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000,
});

defineOptions({
  name: "DemoTable",
});
// 表格高度
const tableHeight = ref(window.innerHeight - 460);

// 监听窗口大小变化
const handleResize = () => {
  tableHeight.value = window.innerHeight - 460;
};

const handleCancel =  () => {
  isEditOnline.value = 'edit';
  isEdit.value = false;
};

onMounted(() => {
  window.addEventListener("resize", handleResize);
  // refresh(); // 组件挂载时自动请求一次
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

// // // 监听 header 搜索事件
// emiter.on("refreshFunSearch", (searchData) => {
//   // 只拷贝需要的字段
//   console.log(searchData, "searchData");
//   Object.assign(searchParam.data, {
//     flowName: searchData.flowName || "",
//     dbType: searchData.dbType || "",
//     deployMode: searchData.deployMode || "",
//     userGroupId: computed(() => rowSelectStore.Gid),
//   });
//   pagination.current = 1;
//   refresh();
// });
emiter.on("refresh", () => {
  refresh();
});
emiter.on("refreshFun", (searchData) => {
  if (searchData) {
    searchData.userGroupId = rowSelectStore.Gid;
    if (searchData.flowGroupId) {
      searchParam.data.flowGroupId = searchData.flowGroupId;
    }
  }
  pagination.current = 1; // 重置页码到第一页
  refresh();
});
emiter.on("refreshFunSearch", (searchData) => {
  console.log(searchData, "searchData");
  pagination.current = 1; // 重置页码到第一页
  searchData.userGroupId = JSON.parse(JSON.stringify(rowSelectStore.Gid));
  searchParam.data = { dbtype: searchData.dsType, ...searchData };
  refresh();
  emiter.emit("updateModuleStart");
});
emiter.on("refreshFunStatus", (searchData) => {
  console.log(searchData, "searchData");
  pagination.current = 1; // 重置页码到第一页 pagination.current = 1; // 重置页码到第一页
  searchData.userGroupId = JSON.parse(JSON.stringify(rowSelectStore.Gid));
  searchParam.data = searchData;
  refresh();
});

//修改全屏图标
const isFullScreen = useFullScreenStore();
const isFullScreenIcon = ref(false);
watch(isFullScreen, () => {
  isFullScreenIcon.value = !isFullScreenIcon.value;
});
// 监听 Gid 的变化
watch(
  () => rowSelectStore.Gid, // 监听特定属性
  (newGid, oldGid) => {
    refresh(); // 当 Gid 变化时调用 refresh 函数
  }
);

// 调整表格空间
const size = ref("small");

// const { tableHeight } = useResizeTableHeight();
// const instance = getCurrentInstance();
const searchParam = reactive({
  data: {
    dsType: "",
    dtType: "",
    source_host_ip: "",
    target_host_ip: "",
    flowGroupId: "",
    flowStatus: "",
    userGroupId: computed(() => rowSelectStore.Gid),
  },
});
const sorterData = reactive({
  data: {},
});
const { data, pagination, refresh, loading } = useTable(
  http.getObjectCollectionFlow,
  {
  path: {
    data: "data",
    total: "total",
    page: "offset",
    pageSize: "limit",
  },
  userGroupId: computed(() => rowSelectStore.Gid),
  searchParam: searchParam,
    immediate: true,
  sorter: sorterData,
  }
);

const selectedRowsKeys = ref([]);
provide("refresh", (searchData) => {
  console.log(searchData, "searchData111111111");
  searchData ? (searchData.userGroupId = rowSelectStore.Gid) : 0;
  pagination.current = 1; // 重置页码到第一页
  refresh();
});

const handleResizeColumn = (w, col) => {
  col.width = w;
};
const handleTableChange = (pag, filters, sorter) => {
  console.log("dataiiiiii: ", data);

  if (
    sorterData.data.column == sorter.column &&
    sorterData.data.columnKey == sorter.columnKey &&
    sorterData.data.field == sorter.field &&
    sorterData.data.order == sorter.order
  ) {
  } else {
    sorterData.data = sorter;
    refresh();
  }
};
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
    selectedRowsKeys.value = selectedRows;
    rowSelectStore.setRowKeyst(selectedRowsKeys.value);
  },
  getCheckboxProps: (record) => ({
    disabled:
      record.flowName === "Disabled User" ||
      record.userGroupId != window.sessionStorage.getItem("userGid"),
    // Column configuration not to be checked
    name: record.flowName,
  }),
};
const open = ref(false);
//TODO 按钮触发事件
const buttonGroupTab = ref([]);
const overView = new Map([
  // [$t('tableIndex.edit'), EditOutlined],
  // [$t('tableIndex.delete'), DeleteOutlined],
  // [$t('tableIndex.addTarget'), PlusOutlined],
  // [$t('tableIndex.flowOverview'), FileSearchOutlined],
  [$t("tableIndex.Stop"), EditOutlined],
  [$t("tableIndex.Recalibration"), DeleteOutlined],
  [$t("tableIndex.Export"), PlusOutlined],
  [$t("tableIndex.Destroy"), FileSearchOutlined],
]);
const onClickButton = (record) => {
  loadBtns(record);
};
const loading1 = ref(false);
const loadBtns = (record) => {
  loading1.value = true;
  http
    .getBtnStatus({ flowId: record.flowId, flowName: record.flowName })
    .then((res) => {
      loading1.value = false;
      const { code, data, msg } = res;
      if (code === "000000") {
        buttonGroupTab.value = data.filter((item) => {
          if (overView.has(item.value)) {
            item.payload.icon = overView.get(item.value);
            return item;
          }
        });
      } else {
        message.error($t("tableIndex.Interfaceexception"));
      }
    });
};

const handleRootBtn = (item, record) => {
  recordStartCompare.value = record;
  console.log(item, record, "item, record");
  rowSelectStore.setRowSelect(record);
  // // 开始
  item == "开始" && startFlow(record);
  // // 停止
  item == "停止" && startFlow(record);
  // // 重新采集
  item == "重新采集" && startFlow(record);
  // // 重新评估
  // item == "重新评估" && startFlow(record);
  // // 日志查看
  // item == "日志查看" && logView(record);
  // 编辑
  item == "编辑" && editTaskName(record);
  // 任务概览
  item == "任务概览" && outlineView(record);
  // 添加目标端
  item == "添加目标库" && addTarget(record);
  // 删除
  item == "删除" && deleteFlow(record);
};
// 部署回流

// 销毁任务
const destoryFlow = (record) => {
  loading.value = true;
  http.deleteModuleEngineFlowInfo({ flowId: record.flowId }).then((res) => {
    loading.value = false;
    const { code, data, msg } = res;
    console.log("data: ", data);
    if (code === "000000") {
      refresh();
      emiter.emit("updateModuleStart");
      message.success($t("tableIndex.Deletesuccessfully"));
    } else {
      message.error($t("tableIndex.Interfaceexception"));
    }
  });
};
//TODO 进入任务详情
const selectRowTask = ref();
const flowDetailsRef = ref(null);
const showDrawer = debounce((record) => {
  console.log(record, "record",store);
  store.commit('setFlowId',record.flowId);
  store.commit('setFlow',record)
  nextTick(() => {
    flowDetailsRef.value.openDrawer(record);
  });
}, 500);
provide("selectRowTask", selectRowTask);
provide("open", open);

const isHovered = ref(false);

const isActiveId = ref();
const handleMouseenter = (isHovered, column, record) => {
  isActiveId.value = record.flowId;
  // console.log('isActiveId: ', isActiveId);
};

const handleMouseleave = (isHovered, column, record) => {
  isActiveId.value = "";
};

// TODO滚动修改样式
const scrollTop = ref();
provide("scrollTop", scrollTop);
const isSticky = ref(false);
const stickyOffset = 100;
watch(scrollTop, (val) => {
  isSticky.value = val > stickyOffset;
  isSticky.value
    ? useStyle("--detailsHeaderBg", "#fff")
    : useStyle("--detailsHeaderBg", "#fff");
});

//TODO 更多操作按钮
const moreOpearteRef = ref("");
const openModal = (record) => {
  console.log("record: ", record);
  if (moreOpearteRef.value) {
    console.log("selectRowTask.value: ", selectRowTask.value);
    rowSelectStore.setRowSelect(record || selectRowTask.value);
    moreOpearteRef.value.showDrawer();
  }
};
// 开始任务
const startFlow = (record) => {
  console.log("record: ", record);
  http.startFlow({ flowId: record.flowId }).then((res) => {
    const { code, data, msg } = res;
    if (code === "000000") {
      message.success('操作成功');
    } else {
      message.error('开始任务失败');
    }
  });
};
// 删除任务
const deleteFlow = (record) => {
  http.deleteFlow({ flowId: record.flowId }).then((res) => {
    const { code, data, msg } = res;
    if (code === "000000") {
      refresh();
    } else {
      message.error('删除任务失败');
    }
  });
};
// 修改任务
const isEdit = ref(false);
const isEditOnline = ref('edit');
const editTaskName = (record) => {
  selectRowTask.value = record;
  rowSelectStore.setRowSelect(record || selectRowTask.value);
  // isEdit.value = true;
  if (record.deployMode === 2) {
    setTimeout(() => {
      nextTick(() => {
        viewTaskRef.value.openDrawer(record, "edit");
      });
    }, 100);
  } else {
    isEditOnline.value = 'edit';
    isEdit.value = true;
  }
};

//TODO 任务概览
const viewTaskRef = ref(null);
const outlineView = (record) => {
  selectRowTask.value = record;
  rowSelectStore.setRowSelect(record || selectRowTask.value);
  if (record.deployMode === 2) {
    setTimeout(() => {
      nextTick(() => {
        viewTaskRef.value.openDrawer(record, "view");
      });
    }, 100);
  } else {
    isEditOnline.value = 'view';
    isEdit.value = true;
  }
  console.log(viewTaskRef, "record");
};

const closeModal = () => {
  isEdit.value = false;
  isEditOnline.value = 'edit';
  refresh();
};

// 添加目标端
const isAddTarget = ref(false);
const addTarget = (record) => {
  selectRowTask.value = record;
  rowSelectStore.setRowSelect(record || selectRowTask.value);
  isAddTarget.value = true;
};

//TODO 任务详情打开外部更多操作按钮组件
provide("moreOpearteRef", openModal);

const recordStartCompare = ref(null);

// 状态 提示
const flowStatusTItles = {
  0: $t("tableIndex.FlowStatus_0"),
  1: $t("tableIndex.FlowStatus_1"),
  2: $t("tableIndex.FlowStatus_2"),
  3: $t("tableIndex.FlowStatus_3"),
  4: $t("tableIndex.FlowStatus_4"),
  5: $t("tableIndex.FlowStatus_5"),
  6: $t("tableIndex.FlowStatus_6"),
  7: $t("tableIndex.FlowStatus_7"),
  8: $t("tableIndex.FlowStatus_8"),
};
const statusFn = (f) => {
  if (flowStatusTItles[f]) return flowStatusTItles[f];
  if (!flowStatusTItles[f]) return;
};

//图片引入
import { loadImage } from "@/hooks/loadImg";
const { loadImgMixin, loadAllPathImg } = loadImage();
function loadImg(url) {
  return loadAllPathImg(url);
}

//图片状态
import statusIcon from "@/components/statusIcon/index.vue";

//解绑emit
import { onUnmounted } from "vue";
onUnmounted(() => {
  emiter.off("refreshFun");
  emiter.off("refreshFunSearch");
  emiter.off("refreshFunStatus");
  emiter.off("exportAllFlow");
  emiter.off("refreshFLowTable");
  emiter.off("updateModuleStart");
});

const router = useRouter();

// 状态颜色映射
function getStatusColor(status) {
  switch (status) {
    case 0:
      return "default"; // 待开始
    case 1:
      return "blue"; // 采集中
    case 2:
      return "blue"; // 评估中
    case 3:
      return "green"; // 已完成
    case 4:
      return "orange"; // 采集停止
    case 5:
      return "red"; // 采集异常
    case 6:
      return "red"; // 评估异常
    case 7:
      return "red"; // 检查失败
    default:
      return "default";
  }
}

// 判断是否评估完成
function isEvalFinished(status) {
  return status === 3;
}

// 跳转到创建迁移任务页面
function goToCreateMigration(record) {
  router.push({
    name: "objectMigration",
    query: { taskId: record.flowId },
  });
}

// 阶段树内容（可根据实际业务调整）
function getPhaseTree(record) {
  const status = record.flowStatus;
  let phases = [];
  if (status === 0) {
    // 待开始
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "wait" },
      { label: $t("tableIndex.EvalPhase"), status: "wait" }
    ];
  } else if (status === 1) {
    // 采集中
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "processing" },
      { label: $t("tableIndex.EvalPhase"), status: "wait" }
    ];
  } else if (status === 2) {
    // 评估中
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "success" },
      { label: $t("tableIndex.EvalPhase"), status: "processing" }
    ];
  } else if (status === 3) {
    // 已完成
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "success" },
      { label: $t("tableIndex.EvalPhase"), status: "success" }
    ];
  } else if (status === 4) {
    // 采集停止
    phases = [
      { label: $t("tableIndex.CollectStop"), status: "stop" },
      { label: $t("tableIndex.EvalPhase"), status: "wait" }
    ];
  } else if (status === 5) {
    // 采集异常
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "error" },
      { label: $t("tableIndex.EvalPhase"), status: "wait" }
    ];
  } else if (status === 6) {
    // 评估异常
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "success" },
      { label: $t("tableIndex.EvalPhase"), status: "error" }
    ];
  } else if (status === 7) {
    // 检查失败
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "error" },
      { label: $t("tableIndex.EvalPhase"), status: "error" }
    ];
  } else if (status === 8) {
    // 评估停止
    phases = [
      { label: $t("tableIndex.CollectPhase"), status: "success" },
      { label: $t("tableIndex.EvalPhase"), status: "stop" }
    ];
  }
  const statusMap = {
    success: { icon: CheckCircleFilled, color: "#52c41a" },
    processing: { icon: ClockCircleFilled, color: "#1677ff" },
    wait: { icon: ClockCircleFilled, color: "#bfbfbf" },
    stop: { icon: PauseCircleOutlined , color: "#faad14" },
    error: { icon: CloseCircleFilled, color: "#ff4d4f" },
  };
  return h(
    "div",
    { style: "display: flex; flex-direction: column; gap: 4px;" },
    phases.map((phase, idx) =>
      h("div", { style: "display: flex; align-items: center;" }, [
        h(statusMap[phase.status].icon, {
          style: `font-size: 18px; color: ${statusMap[phase.status].color}; margin-right: 6px;`,
        }),
        h("span", phase.label),
      ])
    )
  );
}
</script>

<style lang="scss">
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.custom-taskDrawerWapper .ant-drawer-body {
  overflow: hidden;
  padding-top: inherit;
}
.body
  .taskDrawerWapper
  :global(
    :where(.css-dev-only-do-not-override-16pw25h).ant-drawer .ant-drawer-body
  ) {
  /* overflow: hidden */
}
/* 1.过渡动画 */
@keyframes axisX {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0px);
  }
}
.BadgeWapper .ant-badge-status-dot {
  width: 8px !important;
  height: 8px !important;
}

#fullDom .wrap-cell {
  // white-space: normal!important; /* 强制换行 */
  // word-wrap: break-word; /* 支持长单词换行 */
  max-width: 140px; /* 可选：设置最大宽度 */
  overflow: hidden;
}

#fullDom .tag-item {
  // white-space: nowrap; /* 防止标签内部文本换行 */
  // overflow: hidden;    /* 隐藏超出部分 */
  // text-overflow: ellipsis; /* 溢出时显示省略号 */
  // margin-bottom: 4px; /* 标签之间的间距 */
  display: block;
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 隐藏滚动条 */
// #fullDom .ant-table-body {
//   overflow-x: hidden!important;
//   overflow-y: hidden!important;

// }

/* 鼠标移入表格时显示滚动条 */
// #fullDom .ant-table-body:hover {
//   overflow-x: auto!important;
//   overflow-y: auto!important;
// }
/*状态颜色*/
.yesStatus,
.notStatus,
.notStop {
  width: 20px;
  height: 20px;
  position: relative;
  font-size: 20px;
}
.yesStatus {
  color: var(--tagsColor);
}
.notStatus {
  color: #eec900;
}
.notStop {
  color: #f56c6c;
}
.statusPlay {
  width: 20px;
  height: 20px;
  position: relative;
  font-size: 20px;
  color: #67c23a;
  top: 3px;
}
.myNotStatus {
  color: #b7b1b1;
  font-size: 20px;
}
.run {
  animation: rotate 2s infinite linear;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@-moz-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@-o-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.source_info_img {
  width: 60px;
  /*height: 20px;*/
  /*border-radius: 50%;*/
  /*margin-right: 5px;*/
}
.null_img {
  width: 20px;
}
.line-30 {
  line-height: 33px !important;
}
.disabled-row {
  opacity: 0.6; /* 使禁用行显得暗淡 */
}
.ant-dropdown-link .ant-btn {
  padding: 0 !important;
}
.modal-scroll-content {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #fff;
}
.modal-scroll-content::-webkit-scrollbar {
  width: 6px;
  background: #fff;
}
.modal-scroll-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
:deep(.ant-divider-vertical) {
  margin: 0 7px !important;
}
:deep(.ant-table-body tr > td) {
  width: 160px !important;
}
.table_en :deep(.ant-table-body tr > td:last-child) {
  width: 220px !important;
}
</style>
